/**
 * Created by HZH
 * Date-Time: 2022-02-16
 */

import * as charts from 'echarts';
import ReactEcharts from 'echarts-for-react';
import React from 'react';

export default (props) => {
  const { height = '240px', data = [] } = props;
  const option = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      selectedMode: false,
      orient: 'vertical',
      type: 'scroll',
      align: 'right',
      top: '2%',
      right: '3px',
      itemWidth: 12,
      itemHeight: 12,
      textStyle: {
        fontSize: 12,
        color: '#fff',
      },
    },
    series: [
      {
        type: 'pie',
        radius: ['30%', '50%'],
        center: ['30%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        data: data,
      },
    ],
  };

  return <ReactEcharts style={{ height, width: '100%' }} option={option} />;
};
